.vk-tooltip{
  --vk-popover-bg-color:var(--vk-bg-color-overlay);
  --vk-popover-font-size:var(--vk-font-size-base);
  --vk-popover-border-color:var(--vk-border-color-lighter);
  --vk-popover-padding: 12px;
  --vk-popover-border-radius:4px;
  display: inline-block;
}



.vk-tooltip {
   .vk-tooltip__popper{
     background:var(--vk-popover-bg-color);
     border-radius: var(--vk-popover-border-radius) ; 
     border: 1px solid var(--vk-popover-border-color);
     padding:var(--vk-popover-padding); 
     color:var(--vk-text-color-regular);
     line-height: 1.4;
     text-align: justify;
     font-size:var(--vk-popover-font-size);
     box-shadow: var(--vk-box-shadow-light) ; 
     word-break: break-all;
     box-sizing: border-box;
     z-index: 1000;
    #arrow,
    #arrow::before{
     position:absolute; 
     width:8px;
     height:8px; 
     box-sizing: border-box;
     background-color:var(--vk-popover-bg-color);
    }
    #arrow {
     visibility: hidden;
    }
    #arrow::before{
     visibility: visible;
     content: "";
     transform:rotate(45deg);
   }
   /* ^=以什么开头 */
    &[data-popper-placement^="top"] > #arrow {
      bottom: -5px;
    }
    &[data-popper-placement^="bottom"] > #arrow {
      top: -5px;
    }
    &[data-popper-placement^="left"] > #arrow {
      right: -5px;
    }
    &[data-popper-placement^="right"] > #arrow {
      left: -5px;
    }
    &[data-popper-placement^="top"] > #arrow::before{
      border-right: 1px solid var(--vk-popover-border-color); 
      border-bottom: 1px solid var(--vk-popover-border-color);
    }
    &[data-popper-placement ^="bottom"] > #arrow::before{
      border-left: 1px solid var(--vk-popover-border-color); 
      border-top: 1px solid var(--vk-popover-border-color);
    }
    &[data-popper-placement ^="left"] > #arrow::before{
      border-top: 1px solid var(--vk-popover-border-color); 
      border-right: 1px solid var(--vk-popover-border-color);
    }
    &[data-popper-placement ^="right"] > #arrow::before{
      border-bottom: 1px solid var(--vk-popover-border-color); 
      border-left: 1px solid var(--vk-popover-border-color);
    }

  }
  
   .fade-enter-active,
   .fade-leave-active{
     transition: opacity var(--vk-transition-duration);
   }
   .fade-enter-from,
   .fade-leave-to {
        opacity: 0;
   }
}
